<!DOCTYPE HTML>
<html>
    <head>
        <title>Basic Layout</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <link rel="stylesheet" href="../../../resources/css/sencha-touch.css" type="text/css">
        <script type="text/javascript" src="../../../deploy/sencha-touch.js"></script>
        <script>
            Ext.setup({
                onReady: function(){
                    var redRadio = new Ext.form.Radio({
                        name : 'color', 
                        label: 'Red', 
                        inputValue : 'red'
                    });
                    
                    var purpleRadio = new Ext.form.Radio({
                        name : 'color', 
                        label: 'Purple', 
                        inputValue : 'purple'
                    });
                    
                    new Ext.form.FormPanel({
                        fullscreen: true,
                        dockedItems: [{
                            dock: 'top',
                            xtype: 'toolbar',
                            items: [{
                                text: 'Red',
                                handler: function() {
                                    redRadio.setValue(true);
                                }
                            }, {
                                text: 'Purple',
                                handler: function() {
                                    purpleRadio.setValue(true);
                                }
                            }, {
                                text: 'Green',
                                handler: function() {
                                    redRadio.setValue('green');
                                }
                            }]
                        }],
                        items: [{
                            xtype: 'fieldset',
                            title: 'Favorite color',
                            defaults: {xtype: 'radio'},
                            items: [
                                redRadio,
                                {name : 'color', label: 'Blue' , inputValue : 'blue'},
                                {name : 'color', label: 'Green' , checked : true, inputValue : 'green'},
                                purpleRadio
                            ]
                        }]
                    });
                }
            });
        </script>
    </head>
    <body>
    </body>
</html>
